<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
<h2>测试用网页</h2>
<button>测试事件</button>
<button id="pickerPhoto">相册服务 mk.pickerPhoto</button>
<button id="pickerCamera">拍照服务 mk.pickerCamera</button>
<button id="vibrator">传感器 mk.vibrator</button>
<button id="getAreaColumns">省市区数据 mk.getAreaColumns</button>
<br><br>
<img style="width: 100px" src="" alt="" />
<p></p>
<script>
    const button = document
      .querySelector("button")
      .addEventListener("click", async () => {
        // mk.sayHi("晓旭测试用的点击事件");
        // mk.sayHi("测试一下注入的sayHi方法");
        console.log("mk对象", window.mk);
        // 查询用户信息，并写入到 p 标签中
        const userInfo = mk.queryUser();
        document.querySelector("p").innerText = JSON.stringify(userInfo);

        // mk.removeUser();
      });
    // 相册服务 mk.pickerPhoto
    const pickerPhoto = document.querySelector("#pickerPhoto");
    pickerPhoto.addEventListener("click", async () => {
      const str = await mk.pickerPhoto();
      console.log(str);
      // 显示 base64 图片,需要添加前缀标识，否者图片无法展示
      document.querySelector("img").src = `data:image/jpeg;base64,${str}`;
    });
    // 拍照服务 mk.pickerCamera
    const pickerCamera = document.querySelector("#pickerCamera");
    pickerCamera.addEventListener("click", async () => {
      const str = await mk.pickerCamera();
      document.querySelector("img").src = `data:image/jpeg;base64,${str}`;
    });

       // 传感器 mk.vibrator
       const vibrator = document.querySelector("#vibrator");
    vibrator.addEventListener("click", async () => {
      mk.vibrator();
    });

    // 省市区数据 mk.getAreaColumns
    const getAreaColumns = document.querySelector("#getAreaColumns");
    getAreaColumns.addEventListener("click", async () => {
      const res = await mk.getAreaColumns();
      console.log(res);
    });
</script>
<!-- 引入调试控制台 -->
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.3.0/eruda.min.js"></script>
<script>
    eruda.init();
</script>
</body>
</html>
